<template>
    <div class="subpage bill-container">
        <div class="bill-top">
            <div class="bill-top-type">
                <van-dropdown-menu active-color="#31BC8D">
                    <van-dropdown-item v-model="currentType" :options="billOption" @change="chooseType" />
                </van-dropdown-menu>
            </div>
            <div class="bill-top-content">
                <div class="bill-top-content-left">
                    <span>支出：{{expendMoney}}元</span>
                    <span>收入：{{incomeMoney}}元</span>
                </div>
                <div class="bill-top-content-right" @click="jumpMonthView">
                    <span class="color-primary">月账单</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </div>
        </div>
        <div class="bill-list-box">
            <van-list
                v-model="loading"
                :immediate-check="false"
                :finished="finished"
                finished-text="已加载全部了哦～"
                @load="onLoadMore"
            >
                <billListBase :listData="listData" v-if="listData.length > 0"></billListBase>
                <div class="no-data" v-if="showNoInfo">
                    <img src="@/assets/img/balance_empty.png" alt="">
                    <p>{{noDataText}}</p>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
import { DropdownMenu, DropdownItem, List } from 'vant';
import billListBase from './BillComponent';
export default {
    components: {
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [List.name]:List,
        billListBase
    },
    data() {
        return {
            currentType: 0,
            billOption: [
                { text: '全部', value: 0 },
                { text: '采购', value: 1 },
                { text: '求购', value: 2 },
                { text: '供货', value: 3 },
                { text: '转售', value: 4 },
                { text: '购买黑木耳', value: 5 }
            ],
            listData: [],
            noDataText: '您还没有账单明细哦～',
            pageIndex: 1,
            pageSize: 10,
            month: '',
            actCode: null,
            actCategory: '',
            expendMoney: 0,
            incomeMoney: 0,
            showNoInfo: false,
            loading: false,
            finished: false,
        }
    },
    created() {
        this.getCategory()
    },
    methods: {
        jumpMonthView() {
            this.$router.push({
                path: '/my/bill/billMonth'
            });
        },
        chooseType(value) { //选择类型
            this.actCode = value == 0 ? null : value;
            this.listData = [];
            this.pageIndex = 1;
            this.showNoInfo = false;
            this.loading = false;
            this.finished = false;
            this.getListData();
            switch(value) {
                case 0:
                    this.noDataText = '您还没有账单明细哦～'
                    break;
                case 1:
                    this.noDataText = '您还没有采购账单明细哦～'
                    break;
                case 2:
                    this.noDataText = '您还没有求购账单明细哦～'
                    break;
                case 3:
                    this.noDataText = '您还没有供货账单明细哦～'
                    break;
                case 4:
                    this.noDataText = '您还没有转售账单明细哦～'
                    break;
                default:
                    this.noDataText = '您还没有此类型账单明细哦～'
                    break;
            }
        },
        getCategory() { //获取分类
            this.$api.get('/api/trading/category?noLoading')
                .then((res) => {
                    res.data.unshift({
                        code: 0,
                        categoryName: '全部'
                    })
                    res.data.forEach((item) => {
                        item.text = item.categoryName;
                        item.value = item.code;
                    })
                    this.billOption = res.data;
                    this.getListData()
                })
        },
        getListData() { //获取数据
            let getData = {
                pgCt: this.pageIndex,
                pgSz: this.pageSize,
                actCode: this.actCode
            }
            let url = this.pageIndex > 1 ? '/api/trading/list?noLoading' : '/api/trading/list';
            this.$api.get(url, getData)
                .then((res) => {
                    if(res.data.ipage.total > 0){
                        this.showNoInfo = false;
                    }else{
                        this.showNoInfo = true;
                    }
                    this.expendMoney = res.data.expendMoney;
                    this.incomeMoney = res.data.incomeMoney;
                    if(res.data.ipage.records.length > 0){
                        res.data.ipage.records.forEach((item) => {
                            item.actTime = this.$tool.dateFormat(item.actTime, 3)
                        })
                    }
                    this.listData = this.listData.concat(res.data.ipage.records)
                    if(this.pageIndex > 1 && res.data.ipage.records.length < this.pageSize){
                        this.finished = true;
                    }
                })
        },
        onLoadMore() {
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getListData()
                // 加载状态结束
                this.loading = false;
            }, 500);
        },
    }
}
</script>

<style lang="scss" scoped>
    .bill-container {
        background-color: #fff;
        .bill-top {
            .bill-top-type {
                width: 100%;
                height: 50px;
            }
            .bill-top-content {
                width: 100%;
                height: 56px;
                padding: 20px 16px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #5D6164;
                background-color: #f8f8f8;
                .bill-top-content-left {
                    flex: 1;
                    span {
                        &:first-child {
                            margin-right: 20px;
                        }
                    }
                }
                .bill-top-content-right {
                    position: relative;
                    width: 80px;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    margin-left: 10px;
                    &::before {
                        content: "";
                        position: absolute;
                        top: 2px;
                        left: 0;
                        width: 1px;
                        height: 16px;
                        background-color: #D0CFCF;
                    }
                    span {
                        padding-right: 4px;
                    }
                }
            }
        }
        .bill-list-box {
            width: 100%;
            height: calc(100vh - 106px);
            overflow-y: scroll;
        }
        .no-data {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            img{
                width: 162px;
                height: 162px;
                margin: 40px auto 14px;
            }
            p {
                color: #969C9E;
            }
        }
    }
</style>